
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
  <meta name="format-detection" content="telephone=no">
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  <title>镜湖文旅商智慧地图                                                                                                                           </title>
  <link href="css/animate.min.css" rel="stylesheet" />
  <link href="css/index.css?ok=2" rel="stylesheet"/>
  <script type="text/javascript">
    var __activeConfig = {
      version: '10.8',
      wxappid: 'wxe836a2f48204568f',
      activeId: 'BLa1DmmRyp4VoS8jksincQ%3D%3D',
      appid: '36',
      title: '',
      domainConf:'whdjw002',
      bindMobile:false
    };
  </script>
  <script src="./js/jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <script src="./js/pixi.min.js"></script>

  <script src="./js/TweenMax.min.js"></script>
  <script src="js/hammer.min.js"></script>
  <script src="./js/data.js?ok=12"></script>
  <script src="js/common.js?ok=2"></script>
  <style>
    .zb
    {
      width: 20vw;
      position: absolute;
    }
    .look{
      position: absolute;
      right: 10px;
      top: 5px;
      font-size: 0.28rem;
      color: #f5f3f3;
      font-weight: bold;
    }
  </style>

</head>
<body>
<div class="load-area">
  <img class="lcloud ani animate__animated animate__fadeInLeft" src="image/home/lcloud.png"/>
  <img class="lcloud2 ani animate__animated animate__fadeInLeft" src="image/home/lcloud2.png"/>
  <img class="rcloud ani animate__animated animate__fadeInRight" src="image/home/rcloud.png"/>
  <img class="rcloud2 ani  animate__animated animate__fadeInRight" src="image/home/rcloud2.png"/>
  <img class="lmount ani animate__animated animate__fadeInLeft" src="image/home/lmount.png"/>
  <img class="rmount ani animate__animated animate__fadeInRight" src="image/home/rmount.png"/>
  <img class="train ani animate__animated animate__lightSpeedInLeft animate__delay-1s" src="image/home/train.png"/>
  <span class="loadtxt">正在加载...</span>
</div>
<div class="main" id="mainApp" style="width: 100vw;height: 100vh" >
  <div class="container" id="container">
  </div>
  <div class="toolarea">
    <div class="toolheader">
      <div class="toolItem" data="food">
        <div><img src="image/food.png"/> </div>
        <div class="toolItemTitle">美食</div>
      </div>
      <div class="toolItem" data="room">
        <div><img src="image/room.png"/> </div>
        <div class="toolItemTitle">住宿</div>
      </div>
      <div class="toolItem" data="tourism">
        <div><img src="image/tourism.png"/> </div>
        <div class="toolItemTitle">旅游</div>
      </div>
      <div class="toolItem" data="recreation">
        <div><img src="image/recreation.png"/> </div>
        <div class="toolItemTitle">娱乐</div>
      </div>
      <div class="toolItem" data="shopping">
        <div><img src="image/Shopping.png"/> </div>
        <div class="toolItemTitle">购物</div>
      </div>
      <div class="toolItem updown" data="downUp" style="display: none">
        <div><img id="updownImg" style="height:5vw;margin-top: 2vw" src="image/up.png"/> </div>
      </div>
    </div>
    <div class="toolchoose " style="display: none;overflow-y: scroll">
      <ul id="showItems">
      </ul>
    </div>
  </div>
  <div class="tcBox">
    <img class="imgUrl" style="width: 40vw;height:25vw;object-fit: cover" src=""/>
    <p id="name"></p>
  </div>

  <div class="bigBox animate__animated animate__zoomIn">
    <img class="imgUrl" style="width:100%;" src=""/>
    <div class="icoClose"></div>
    <div style="position: relative">
      <p id="bigname"></p>
      <p id="address"></p>
      <div class="location" onclick="goLocation()"><img src="image/location.png"/>前往</div>
    </div>
    <div class="intro" style="display: none">
      <div class="line" style="width: 100%;background: #f6f6f8;height: 6px"></div>
      <div>
        <div style="font-size: 1rem;font-weight:bold">【简介】</div>
        <div class="introContent">
        </div>
      </div>
    </div>
  </div>
  <span class="look">访问量：<i></i></span>
</div>

</body>
<script>
  var  app=null;
  var mapSprite =null;
  var screenWidth=0;
  var screenHeight=0;
  var minScale=0.2;
  var maxScale=1;
  var currentScale=0;
  var tCurrentItem=null;
  var width=0;
  var height=0;
  var step = 0.003;   // 缩放率
  var img=null;
  var zIndex=0;
  var isTouch=false;
  var currentZhanDian="";
  var mapUrl="image/3200_1.jpg";
  var currentInfo={width:0,height:0};
  var tCurrentItem2=null;
  var musicJx=null;
  var isfirst=true;
  $(function () {
    var container=document.getElementById('container');
    var containerStyle = getComputedStyle(container);
    screenWidth = parseInt(containerStyle.width, 10);
    screenHeight = parseInt(containerStyle.height, 10);
    app = new PIXI.Application({
      width: screenWidth, height: screenHeight, backgroundColor: 0x5bb671,resolution:4
    });
    app.renderer.autoDensity=true;
    app.renderer.resize(screenWidth,screenHeight);
    container.appendChild(app.view);
    const containerStage = new PIXI.Container();


    app.stage.addChild(containerStage);
    img=new Image();
    img.onload = function(){
      var texture =  PIXI.Texture.from(mapUrl);
      // Scale mode for pixelation
      mapSprite= new PIXI.Sprite(texture);
      width=img.width;
      height=img.height;
      mapSprite.sortableChildren = true;
      subscribe(mapSprite);
      mapSprite.x=-screenWidth/2;
      mapSprite.y=-(img.height+screenHeight)/2;
      containerStage.addChild(mapSprite);
      minScale=Math.max(screenWidth/width,screenHeight/height);
      zhans.map(item=>{
        addSpriteChild(item);
      })
      setTimeout(function () {

        $(".load-area").fadeOut(2000);
        app.stage.pivot.set(0.5,0.5);
        TweenMax.to(app.stage.scale, 2, {x: minScale,y:minScale});
        TweenMax.to(mapSprite,2,{x:0,y:0});
        currentInfo={width:app.stage.width,height:app.stage.height};
        currentScale=minScale;



      },1000)
      /****
       * 分享信息
       * @type {{imgUrl: string, success: shareData.success, link: string, title: string, desc: string}}
       */
      var shareData = {
        title: "镜湖文旅商智慧地图 ",
        desc: "鸠兹故地 山水镜湖",
        imgUrl: "http://cdn.ixiaomayun.com/Public/Active/20220228/621ca5024321d.png",
        link: apihost + "/Active/Misc/Url/go?activeid=" + __activeConfig.activeId,
        success: function () {
        }
      };
      common.wxshare(shareData);
    };
    img.src=mapUrl;

    var hammertime=new Hammer(document.getElementById('mainApp'));
    hammertime.get('pinch').set({ enable: true });
    hammertime.on("pinch", function(ev) {
      isTouch=true;
    }).on("pinchin",function (ev) {
      changeMapSize(-1)
    }).on("pinchout",function (ev) {
      changeMapSize(1)
    }).on("pinchend",function (ev) {

    });


    $.ajax({
      url:"https://open.ixiaomayun.com/api/Active/Misc/ActiveNoAuth/addActiveHits?activeid=1799",
      type:"get",
      dataType:"json",
      success:function (data) {
        console.log("data",data);
        var data=data>10000?(data/10000).toFixed(2)+"万":data;
        $(".look i").html(data);
      }
    })
  })

  function onClick(event)
  {
    let currentEvent=event.currentTarget;
    if(currentEvent.type=="zhan")
    {
      removeChild();
      $(".tcBox").hide();
      var parentId=currentEvent.id;
      currentZhanDian=parentId;
      showZhanData(parentId);
    }
    else
    {
      zIndex=event.currentTarget.zIndex=zIndex+1;
      mapSprite.children.map(item=>{
        if(item.id==currentEvent.id)
        {
          ShowCell(item);
          tCurrentItem2=item;
        }
      })
    }
  }
  function subscribe(obj) {
    obj.interactive = true;
    obj.on('mousedown', onDragStart)
            .on('touchstart', onDragStart)
            .on('mouseup', onDragEnd)
            .on('mouseupoutside', onDragEnd)
            .on('touchend', onDragEnd)
            .on('touchendoutside', onDragEnd)
            .on('mousemove', onDragMove)
            .on('touchmove', onDragMove);
  }

  function onDragStart(event) {
    if (!this.dragging) {
      this.data = event.data;
      this.dragging = true;
      this.dragPoint = event.data.getLocalPosition(this.parent);
      this.dragPoint.x -= this.x;
      this.dragPoint.y -= this.y;
    }
  }

  function onDragEnd() {
    if (this.dragging) {
      this.dragging = false;
      this.data = null;
    }
  }

  function onDragMove() {
    $(".bigBox").hide();
    if (this.dragging&&!isTouch) {
      const newPosition = this.data.getLocalPosition(this.parent);
      this.x = newPosition.x - this.dragPoint.x;
      this.y = newPosition.y - this.dragPoint.y;
      if(this.x>0) this.x=0;
      if(this.y>0) this.y=0;
      if(this.x<-(app.stage.width-screenWidth)/app.stage.width*3200) this.x=-(app.stage.width-screenWidth)/app.stage.width*3200;
      if(this.y<-(app.stage.height-screenHeight)/app.stage.height*3793) this.y=-(app.stage.height-screenHeight)/app.stage.height*3793;
      if(!$(".tcBox").is(":hidden"))
      {
        if(tCurrentItem2)
        {
          var tcheight=$(".tcBox").height();
          $(".tcBox").css({left:(tCurrentItem2.x/1+mapSprite.x/1-tCurrentItem2.width/2)*0.6+"px",top:((tCurrentItem2.y/1+mapSprite.y/1)*0.6-tcheight-30)+"px"});
        }
      }
    }
  }


  var start = [];

  document.addEventListener("touchstart", function (e) {
    //手指按下时的手指所在的X，Y坐标


  }, false);

  //监听 touchmove 事件 手指 移动时 做的事情
  document.addEventListener("touchmove", function (e) {
    e.preventDefault();

  }, false);

  //监听 手指离开屏幕时
  document.addEventListener("touchend", function (e) {
    //将 isTouch 修改为false  表示 手指已经离开屏幕
    isTouch=false;
    if(musicJx&&!musicJx.isPlay()&&isfirst)
    {
      isfirst=false;
      musicJx.PlayMusic();
    }

  }, false);


  /**
   * 修改画布的大小
   * scale -1 或者 1
   */
  function changeMapSize(scale)
  {
    $(".tcBox").hide();
    let canScale=scale>0?app.stage.scale.x+step:app.stage.scale.x-step;
    canScale=Math.min(maxScale, Math.max(canScale, minScale));
    app.stage.scale.x =canScale ;
    app.stage.scale.y =canScale;
    dotSprite(canScale);
    //调整位置
    let nowX=currentInfo.width-app.stage.width;
    let nowY=currentInfo.height-app.stage.height;
    mapSprite.x+=nowX/2;
    mapSprite.y+=nowY/2;
    currentInfo={width:app.stage.width,height:app.stage.height};
    changePosition();
  }

  window.addEventListener("mousewheel",function (event) {
    event.preventDefault();
    changePosition();
    $(".tcBox").hide();
    if(event.wheelDelta<0)
    {
      app.stage.scale.x-=step;
      app.stage.scale.y-=step;
    }
    else
    {
      app.stage.scale.x+=step;
      app.stage.scale.y+=step;

    }
    app.stage.scale.x = Math.min(maxScale, Math.max(app.stage.scale.x, minScale));
    app.stage.scale.y = Math.min(maxScale, Math.max(app.stage.scale.x, minScale));
    dotSprite(Math.min(maxScale, Math.max(app.stage.scale.x, minScale)));
    //调整位置
    let nowX=currentInfo.width-app.stage.width;
    let nowY=currentInfo.height-app.stage.height;
    mapSprite.x+=nowX/2;
    mapSprite.y+=nowY/2;

    currentInfo={width:app.stage.width,height:app.stage.height};
  }, {passive: false})

  $(".toolItem").click(function () {
    var type=$(this).attr("data");
    if(type!='downUp'){
      $(".toolItem").removeClass("active");
      $(this).addClass("active");
      removeChild();
      setTimeout(function () {
        let datas=data[type];
        datas.map(item=>{
          if(currentZhanDian&&item.img&&currentZhanDian==item.parentid)
          {
            addSpriteChild(item);
          }
          else if(!currentZhanDian&&item.img)
          {
            addSpriteChild(item);
          }
        });
        expendTools(datas);
      },500)
    }
    else
    {
      upOrDown();
    }
  });


  //添加精灵类型坐标
  function addSpriteChild(item)
  {
    var hasChild=false;
    mapSprite.children.map(theItem=>{
      if(theItem.id==item.id)
      {
        theItem.visible=true;
        hasChild=true;
      }
    })
    if(!hasChild)
    {
      var texture =  PIXI.Texture.from(item.img);
      let itemSprite= new PIXI.Sprite(texture);
      itemSprite.interactive = true;
      itemSprite.buttonMode = true;
      itemSprite.name=item.name;
      itemSprite.type=item.type?item.type:"dot";
      itemSprite.id=item.id;
      if(item.type=="zhan")
      {
        itemSprite.zIndex=1;
      }
      else
      {
        itemSprite.anchor.set(0.5);
        itemSprite.zIndex=item.zOrder?item.zOrder:2;
      }
      let location=item.location.split(",");
      itemSprite.position.x=location[0];
      itemSprite.position.y=location[1];
      itemSprite.on('tap',onClick);
      mapSprite.addChild(itemSprite);
      if(item.icolocation)
      {
        let icoImage=item.icoType==1?"images/zhantai/ico.png":"images/zhantai/ico2.png";
        var texture =  PIXI.Texture.from(icoImage);
        let itemSprite2=new PIXI.Sprite(texture);
        itemSprite2.interactive = true;
        itemSprite2.buttonMode = true;
        itemSprite2.name=item.name;
        itemSprite2.type=item.type?item.type:"dot";
        itemSprite2.id=item.id;
        let icolocation=item.icolocation.split(",");
        itemSprite2.position.x=icolocation[0];
        itemSprite2.position.y=icolocation[1];
        itemSprite2.on('tap',onClick);
        mapSprite.addChild(itemSprite2);
      }
    }
  }



  function upOrDown()
  {
    if($(".toolchoose").is(":hidden"))
    {
      $("#updownImg").attr("src","image/down.png");
      $(".toolchoose").show();
    $(".toolarea").css({"height":"45vw"});

    }
    else
    {
      $("#updownImg").attr("src","image/up.png");
      $(".toolchoose").hide();
       $(".toolarea").css({"height":"15vw"});

    }

  }
  function expendTools(datas)
  {
    let html="";
    var count=0;
    datas.map(item=>{
      if(currentZhanDian&&item.parentid==currentZhanDian)
      {
        html+="<li class='item' data='"+item.id+"'>"+item.name+"</li>"
        count++;
      }
      else if(!currentZhanDian)
      {
        html+="<li class='item' data='"+item.id+"'>"+item.name+"</li>"
        count++;
      }

    });
    if(count>0)
    {
      $(".updown").show();
      $("#updownImg").attr("src","image/down.png");
      $(".toolchoose").show();
      $(".toolarea").css({"height":"45vw"});
      $(".toolchoose ul").html(html);
    }
    else
    {
      $(".updown").hide();
      $("#updownImg").attr("src","image/up.png");
      $(".toolchoose").hide();
      $(".toolarea").css({"height":"15vw"});
      $(".toolchoose ul").html("");
    }
    $(".item").click(function () {
      $(".bigBox").hide();
      var itemid=$(this).attr("data");
      $(".item").each(function () {
        $(".item").removeClass("activeItem");
      })
      $(this).addClass("activeItem");
      changaMapScale(itemid,0.6);
      getCurrentLocation(itemid);
      let item=getItemData(itemid,2);
      tCurrentItem2=item;
      var tcheight=$(".tcBox").height();
      $(".tcBox").css({left:(item.x/1+mapSprite.x/1-item.width/2)*0.6+"px",top:((item.y/1+mapSprite.y/1)*0.6-tcheight-30)+"px"});

    });
  }




  function changaMapScale(itemid,scale=0.8,parentId)
  {
    stageScale(scale);
    dotSprite(0);
    if(parentId)
    {
      mapSprite.children.map(item=>{
        if(item.id==parentId)
        {
          var nowzhan=null;
          zhans.map(item2=>{
            if(item2.id==parentId)
            {
              nowzhan=item2;
            }
          })
          if(nowzhan.center)
          {
            let location=nowzhan.center.split(",");
            mapSprite.x=-location[0];
            mapSprite.y=-location[1];
          }
        }
      })
    }
    else
    {
      mapSprite.children.map(item=>{
        if(item.id==itemid)
        {
          mapSprite.x=-item.x+screenWidth*3/4;
          mapSprite.y=-item.y+screenHeight*5/7;
          zIndex=item.zIndex=zIndex+1;
        }
      })
    }
  }

  //展示每个站点数据
  function showZhanData(parentId) {
    var newData=[];
    for (item in data)
    {
      data[item].map(mItem=>{
        if(mItem.parentid==parentId)
        {
          newData.push(mItem);
        }
      })
    }
    newData.map(item=>{
      if(item.img)
      {
        addSpriteChild(item);
      }
    })
    let currentZhan=null;
    zhans.map(item=>{
      if(item.parentId==item.id)
      {
        currentZhan=item;
      }
    })
    changaMapScale(currentZhan,0.4,parentId)
  }


  //移除子元素
  function removeChild()
  {
    mapSprite.children.map(item=>{
      if(item.type!="zhan")
      {
        item.visible = false;
      }
    });
  }

  /***
   * 获取当前的坐标位置
   */
  function getCurrentLocation(itemid)
  {

    let currentData=getItemData(itemid,1);
    $(".tcBox").show();
    if(currentData.ico)
    {
      $(".imgUrl").attr("src",currentData.ico);
    }
    else
    {
      $(".imgUrl").attr("src","image/nopic.png");
    }
    $(".tcBox #name").html(currentData.name+"<span class='moreBt' onclick='moreInfo(\`"+itemid+"\`)'>更多+</span>");
  }


  /**查询更多信息**/
  function moreInfo(data)
  {
    let currentItem=getItemData(data,1);
    $(".tcBox").hide();
    $(".bigBox").show();
    tCurrentItem=currentItem;
    $("#bigname").html(currentItem.name);
    $("#address").html("地址："+currentItem.address);
    if(tCurrentItem.intro){
      $(".intro").show();
      $(".introContent").html(currentItem.intro);
    }
    else
    {
      $(".intro").hide();
    }
  }

  /**
   *
   * @param itemid
   * @param type   1获取数据的节点    2获取精灵的节点
   * @returns {null}
   */
  function getItemData(itemid,type=1)
  {

    if(itemid.indexOf("_")>0)
    {
      if(type==1)
      {
        let value=itemid.split("_");
        let datas=data[value[0]];
        var nowitem=null;
        datas.map(item=>{
          if(item.id==itemid)
          {
            nowitem=item;
          }
        })
        return nowitem;
      }
      else if(type==2)
      {
        var nowitem=null;
        mapSprite.children.map(item=>{
          if(item.id==itemid)
          {
            nowitem=item;
          }
        })
        return nowitem;
      }
    }

  }


  /**
   * 获取位置导航
   */
  function goLocation()
  {

    console.log("tCurrentItem.coordinate",tCurrentItem.coordinate);
    if(tCurrentItem.coordinate)
    {
      var coordinate=tCurrentItem.coordinate.split(",");
   
      common.openLocation(coordinate[0],coordinate[1],tCurrentItem.name,tCurrentItem.address);
    }

  }


  /***
   * 展示单个商家节点
   * @constructor
   */
  function ShowCell(item)
  {
    if(app.stage.scale.x!=0.6)
    {
      changaMapScale(item.id,0.6);
    }
    currentInfo={width:app.stage.width,height:app.stage.height};
    getCurrentLocation(item.id);
    var tcheight=$(".tcBox").height();
    $(".tcBox").css({left:(item.x/1+mapSprite.x/1-item.width/2)*0.6+"px",top:((item.y/1+mapSprite.y/1)*0.6-tcheight-30)+"px"});
  }

  /**
   * 放大缩小画布比例
   * @param sacle
   */
  function stageScale(sacle)
  {
    app.stage.scale.x = sacle;
    app.stage.scale.y = sacle;
    currentInfo={width:app.stage.width,height:app.stage.height};
    currentScale=sacle;
  }



  $(".icoClose").click(function () {
    $(".bigBox").hide();
  });

  /**
   * 保证坐标精灵的大小
   */
  function dotSprite(scale)
  {
    mapSprite.children.map(item=>{
      if(item.type!="zhan")
      {
        if(scale==0)
        {
          item.scale.x=1;
          item.scale.y=1;
        }
        else
        {
          let cj=scale-currentScale;
          var value=item.scale.x-cj;
          if(value>1.5) value=1.5;
          if(value<0.4) value=0.4;
          item.scale.x=value;
          item.scale.y=value;
        }


      }
    })
  }

  /***
   * 动态修改位置
   */
  function changePosition()
  {
    if(mapSprite.x>0) mapSprite.x=0;
    if(mapSprite.y>0) mapSprite.y=0;
    if(mapSprite.x<-(app.stage.width-screenWidth)/app.stage.width*3200) mapSprite.x=-(app.stage.width-screenWidth)/app.stage.width*3200;
    if(mapSprite.y<-(app.stage.height-screenHeight)/app.stage.height*3793) mapSprite.y=-(app.stage.height-screenHeight)/app.stage.height*3793;

  }

  function addChild(item)
  {
    var location=item.location.split(",");
    var x=(mapSprite.x+location[0])*app.stage.width/3200;
    var y=(mapSprite.y+location[1])*app.stage.width/3200;
    if($("#"+item.id).length<=0)
    {
      $("#mainApp").append("<img id='"+item.id+"' class='zb' style='top:"+y+"px;left:"+x+"px' src='"+item.img+"'/>");
    }
  }

  wx.ready(function () {
    var MP3 = "/Public/Active/20220310/6229f34fcecf6.mp3";
    musicJx=new music_jx("http://cdn.ixiaomayun.com" + MP3,{width:"30px",location:"3%,92%"},false);
    if(!musicJx.isPlay())
    {
      musicJx.PlayMusic();
    }
  });


</script>
</html>